<template>
<div>
  <div class="tou">
    <van-nav-bar class="head">
      <template #left >
        <img class="logo" src="../../assets/logo.png" alt="">
      </template>
      <template #right >
        <van-icon name="search" size="0.47rem" color="#fff" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
  </div>
  <div class="tabs">
    <van-tabs class="vantabs" v-model="mychannelcons.active" anmiment sticky offset-top='1.226rem' >
      <van-tab v-for="(item,key) in userchannels" :key='key'  :title="item.name" style="box-sizing:border-box;padding-top:1.3rem;height:85vh;overflow-y:scroll;">
        <List :channels='item'></List>
      </van-tab>
      <div solt="nav-right" class="hanbaobtn" @click="showtan">
        <i class="iconfont icon-gengduo" style="font-size:.45rem"></i>
      </div>
    </van-tabs>
  </div>
  <!--我的频道-->  
  <Mypin :mychannelcons='mychannelcons' @chactivetab='chactivetab'></Mypin>
</div>
</template>

<script>
import {getchannels} from '@/api/article'
import {getuserchannels} from '@/api/article'
import List from '@/components/List'
import Mypin from '@/components/Mypin'

import {getItem} from '@/utils/localfun.js'
import { mapState } from 'vuex';

export default {
  components: {
    List,
    Mypin
  },
  props: {},
  data() {
    return {
      active:2,//不用了
      channels:[],
      userchannels:[],
      scrolllist: [],
      loading: false,
      finished: false,
      mychannelcons:{
        channelshow:false,
        mychannellist:[],
        channellist:[],
        active:0
      }
    }

  },
  watch: {},
  computed: {
    ...mapState(['logintoken'])
  },
  methods: {
    showtan(){
      this.mychannelcons.channelshow=true 
      console.log(this.mychannelcons.channelshow)
    },
    //tab标签激活索引被修改
    chactivetab(index){
      this.mychannelcons.active=index
      console.log(this.active)
    },
    async getchannel(){
      try{
        //已登陆请求接口
        const {data}=await getchannels()
        this.mychannelcons.channellist=this.channels=data.data.channels
        console.log(this.channels)
      }catch{
        this.$toast('获取频道列表失败')
      }
    },
    async getuserchannel(){
      try{
        if(this.logintoken){
          //已登陆请求接口
          const {data}=await getuserchannels()
          this.mychannelcons.mychannellist=this.userchannels=data.data.channels
          console.log(this.userchannels)
          
        }else{
          //未登录
          // 有本地缓存情况
          var localdata=getItem('MYCHANNEL')
          console.log(localdata,'localdata')
          if(localdata){
            this.mychannelcons.mychannellist=this.userchannels=localdata
          }else{
          // 没有本地缓存情况
            this.getchannel()
          }
          
        }
        console.log(this.channels)
      }catch{
        this.$toast('获取频道列表失败')
      }
    }
    
  },

  
  created() {
    this.getchannel()
    this.getuserchannel()
  },
  mounted() {

  }
};
</script>
<style lang="less" scoped>
.tou{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index:100;
}
.tou .head{
  background:rgb(0,119,255)
}
.logo{
  height:70px;margin-left:-30px
}
/deep/.vantabs .van-tabs__nav--line{padding-right:70px}
/deep/.vantabs .van-tabs__nav--line.van-tabs__nav--complete{padding-right:80px;}

.hanbaobtn{
  position: fixed;
  width:33px;
  height:80px;
  right:0;
  padding:0 30px;
  top:1.37rem;
  z-index:1000;
  background:rgba(255,255,255,.8)
}


</style>